<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>所有商品</title>
  <link href="../mall/image/迪.png"rel="shortcut icon"type="image/x-icon">
  <link rel="stylesheet" th:href="@{/admin/element-ui/lib/theme-chalk/index.css}">
  <style>
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-row>
      <el-button
          @click="openDialog('添加分类')"
          style="margin-left: 81px"
          type="primary">新增
      </el-button>
      <el-button
          @click="openDialog('修改分类')"
          type="primary">修改
      </el-button>

      <el-popover
          placement="top"
          width="160"
          v-model="visible">
        <p>确定删除吗?</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="_delete">确定</el-button>
        </div>
        <el-button
            slot="reference"
            type="danger">删除
        </el-button>
      </el-popover>

      <el-button
          @click="toLowerLevel"
          type="primary">下级分类
      </el-button>
      <el-button
          @click="toUpperLevel"
          type="primary">上级分类
      </el-button>
    </el-row>
    <template>
      <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 60%;">
        <el-table-column
            property="categoryName"
            align="center"
            label="分类名称"
            width="200">
        </el-table-column>
        <el-table-column
            property="categoryRank"
            align="center"
            label="排序值"
            width="200">
        </el-table-column>
        <el-table-column
            property="createTime"
            align="center"
            width="200"
            label="创建时间">
        </el-table-column>
      </el-table>
    </template>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="categoryName">
          <el-input v-model="form.categoryName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序值" :label-width="formLabelWidth" prop="categoryRank">
          <el-input v-model="form.categoryRank" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogTitle == '添加分类'" type="primary" @click="add('form')">添 加</el-button>
        <el-button v-if="dialogTitle == '修改分类'" type="primary" @click="update('form')">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</body>
<script th:src="@{/admin/vue.js}"></script>
<script th:src="@{/admin/element-ui/lib/index.js}"></script>
<script th:src="@{/admin/jquery-3.3.1.min.js}"></script>
<script th:src="@{/admin/dateformat.js}"></script>
<script>


  new Vue({
    el: "#app",
    data() {
      return {
        tableData: [],
        currentRow: null,
        currentLevel: 1,
        currentParentId: 0,
        addingParentId: 0,
        form: {
          categoryName: '',
          categoryLevel: this.currentLevel,
          categoryRank: 0,
          parentId: this.currentParentId
        },
        rules: {
          categoryName: [
            {required: true, message: '不能为空', trigger: 'blur'},
          ],
          categoryRank: [
            {required: true, message: '不能为空', trigger: 'blur'},
            {pattern: '^[0-9]*$', message: '请输入数字', trigger: 'blur'}
          ]
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        visible: false,
        dialogTitle: '',

      }
    },
    methods: {
      getCategoryByParentId(parentId) {
        const _this = this;
        $.ajax({
          url: "/admin/category/parent/" + parentId,
          type: "GET",
          success: function (resp) {
            for (let i = 0; i < resp.length; i++) {
              resp[i].createTime = DateFormat.format(new Date(resp[i].createTime), 'yyyy-MM-dd hh:mm:ss');
            }
            _this.tableData = resp;
          }
        })
      },

      getCategoryByLevel(level) {
        const _this = this;
        $.ajax({
          url: "/admin/category/" + level,
          type: "GET",
          success: function (resp) {
            for (let i = 0; i < resp.date.length; i++) {
              resp.date[i].createTime = DateFormat.format(new Date(resp.date[i].createTime), 'yyyy-MM-dd hh:mm:ss');
            }
            _this.tableData = resp.date;
          }
        })
      },

      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },


      currentRowIsNull() {
        if (this.currentRow == null) {
          this.$notify({
            title: '警告',
            message: '请先选中一个分类',
            type: 'warning'
          });
          return true
        } else {
          return false;
        }
      },

      openDialog(title) {
        if (title === '添加分类') {
          this.form.categoryRank = 0
          this.form.categoryName = ''
          this.dialogFormVisible = true;
          this.dialogTitle = title;
        } else if (title === '修改分类') {
          if (!this.currentRowIsNull()) {
            this.form.categoryName = this.currentRow.categoryName
            this.form.categoryRank = this.currentRow.categoryRank
            this.dialogFormVisible = true;
            this.dialogTitle = title;
          }
        }
      },

      add(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.categoryLevel = this.currentLevel
            this.form.parentId = this.addingParentId
            console.log(this.form)
            const _this = this;
            $.ajax({
              url: "/admin/category",
              type: "POST",
              data: {
                "categoryLevel": _this.form.categoryLevel,
                "categoryName": _this.form.categoryName,
                "categoryRank": _this.form.categoryRank,
                "parentId": _this.form.parentId,
              },
              dataType: "json",
              success: function (resp) {
                if (resp.state == 200) {
                  _this.$notify({
                    title: '成功',
                    message: '已将分类保存',
                    type: 'success'
                  });
                  _this.getCategoryByParentId(_this.addingParentId)
                } else {
                  this.$notify.error({
                    title: '错误',
                    message: resp.message
                  });
                }
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      update(formName) {
        const _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            $.ajax({
              url: "/admin/category",
              type: "PUT",
              data: {
                "categoryId": _this.currentRow.categoryId,
                "categoryName": _this.form.categoryName,
                "categoryRank": _this.form.categoryRank,
              },
              dataType : "JSON",
              success : function (resp) {
                if (resp.state == "200"){
                  _this.$notify({
                    title : '成功',
                    message :'已将分类信息更新',
                    type : 'success',
                  })
                  _this.getCategoryByParentId(_this.addingParentId)
                }else{
                  _this.$notify.error({
                    title : '错误',
                    message :'服务器错误',
                  })
                }
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      }
      ,
      _delete() {
        const _this = this;
        if (!this.currentRowIsNull()) {

          $.ajax({
            url: "/admin/category/id",
            type: "DELETE",
            data: {
              "categoryId": _this.currentRow.categoryId
            },
            dataType: "JSON",
            success: function (resp) {
              if (resp.state == 200) {
                _this.$notify({
                  title: '成功',
                  message: '已将该分类移除',
                  type: 'success'
                })
                _this.getCategoryByParentId(_this.addingParentId)
              } else {
                _this.$notify.error({
                  title: '失败',
                  message: '服务器错误',
                })
              }
            }
          })
        }
      }
      ,

      toLowerLevel() {
        if (!this.currentRowIsNull() && this.currentRow.categoryLevel != 3) {
          this.getCategoryByParentId(this.currentRow.categoryId)
          this.currentLevel += 1;
          this.currentParentId = this.currentRow.parentId;
          this.addingParentId = this.currentRow.categoryId;
        }
        if (this.currentRow.categoryLevel == 3) {
          this.$notify.info({
            title: '消息',
            message: '已是最底层'
          });
        }

      }
      ,

      toUpperLevel() {
        console.log("currentLevel = " + this.currentLevel)
        console.log("currentParentId = " + this.currentParentId)
        if (this.currentLevel == 3) {
          this.currentLevel -= 1;
          this.getCategoryByParentId(this.currentParentId)
        } else {
          this.currentParentId = 0;
          if (this.currentLevel == 1) {
            this.$notify.info({
              title: '消息',
              message: '已是最顶层'
            });
          }
          this.getCategoryByLevel(1)
          this.currentLevel = 1;
        }
      },
    },
    mounted: function () {
      this.getCategoryByLevel(this.currentLevel)
    }
  })
</script>
</html>